<template>
	<div class="admin-auto-images">
		<x-border ref="xBorder" :title="viewModel.border.title" icon="flaticon-settings" v-if="async">
			<div class="auto-image_ul" :style="`height: ${documentHeight}px;`">
				<div class="auto-image_head">
					<div class="image_head-li" :class="{'image_head-active':gridIndex==-1}" @click="gridIndex=-1,tabClick({id:''})">所有的</div>
					<div class="image_head-li" :class="{'image_head-active':gridIndex==tabIndex}" v-for="(tabItem,tabIndex) in tabList" :key="tabIndex" @click="gridIndex=tabIndex,tabClick(tabItem)">{{tabItem.name}}</div>
				</div>
				<div class="auto-image_grid" v-if="viewModel.tabs.length!=0">
					<div class="image_grid-li" :class="{'image_grid-gactive':gridIndex2==-1}" @click="gridIndex2=-1,gtabChang({key: ''})">所有的</div>
					<div class="image_grid-li" :class="{'image_grid-gactive':gridIndex2==gIndex}" v-for="(gItem,gIndex) in viewModel.tabs" :key="gIndex" @click="gridIndex2=gIndex,gtabChang(gItem)">{{gItem.value}}</div>
				</div>
				<div class="auto-image_search">
					<el-input v-model="searchValue" class="search-input" placeholder="标题" size="small"></el-input>
					<div class="search-but" @click="butSearch">
						<i class="el-icon-search"></i>
						搜索
					</div>
				</div>
				<div class="auto-image_conter">
					<div class="auto-image_bli" v-for="(item,index) in viewModel.result.result" :key="index">
						<div class="auto-image_trpo">
							<div class="auto-image_htop">
								<el-image ref="img_preview" :src="$ala.urlImage(item.image)" :preview-src-list="srcList"></el-image>
								<div class="auto-image_mark">
									<div class="auto-image_mbox">
										<div class="auto-image_buts" @click="tabChang(item.url)">编辑</div>
										<div class="auto-image_buts auto-image_buts1" @click="qrocdePreview(item,index)">生成预览</div>
										<div class="auto-image_buts auto-image_buts2" @click="qrcodeDetele(item)">删除</div>
									</div>
								</div>
							</div>
							<div class="auto-image_text">{{item.name}}</div>
						</div>
					</div>
				</div>
				<div class="auto-image_pagin">
					<el-pagination @current-change="currentChange" :current-page.sync="tabPara.pageIndex" :page-size="viewModel.result.pageSize" :pager-count="11" layout="prev, pager, next" :total="viewModel.result.recordCount"></el-pagination>
				</div>
			</div>
		</x-border>
	</div>
</template>


<script>
	import ala from 'ala'
	import data from './data'
	export default {
		props: {
			widget: {},
			title: {}
		},
		data() {
			return {
				reload: true, // 是否刷新
				table: null,
				viewModel: null,
				async: false,
				searchValue: '',
				documentHeight: 0,
				tabList: null,
				gridIndex: -1,
				gridIndex2: -1,
				tabPara: {
					classId: '',
					qrCodeType: '',
					pageSize: 36,
					pageIndex: 1
				},
				dialogVisible: false,
				srcList: []
			}
		},
		methods: {
			async init() {
				var h = document.documentElement.clientHeight || document.body.clientHeight
				this.documentHeight = h - 150
				if (!this.widget.value || !this.widget.value) {
					this.$ala.toMessage('类型传入不正确,请重新传入', 'danger')
				}
				var repones = await this.$ala.httpGet('api/RelationTree/GetAdminTree?type=QrCodeClassRelation')
				this.tabList = repones.data
				this.viewModel = await data.search(this.widget.value, this.tabPara)
				this.async = true
			},
			tabChang(url) {
				this.$router.push(url)
			},
			async tabClick(val) {
				this.tabPara.pageIndex = 1
				this.tabPara.classId = val.id
				this.viewInit(this.tabPara)
			},
			async qrcodeDetele(deleteData) {
				var this_ = this
				this.$confirm('确定要删除该海报?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var res = await this_.$ala.httpDelete('Api/QrCode/Delete', {
						id: deleteData.id
					})
					if (res.status === 1) {
						this_.$message({
							message: '删除成功！',
							type: 'success'
						})
						this_.init()
					} else {
						this_.$message.error('删除失败！')
					}
				})
			},
			async qrocdePreview(pItem, pIndex) {
				this.srcList = []
				var pResones = await this.$ala.httpGet('Api/QrCode/Create', {
					id: pItem.id
				})
				if (pResones) {
					this.srcList.push(this.$ala.urlImage(pResones))
					this.$refs.img_preview[pIndex].showViewer = true
				}
			},
			gtabChang(gVal) {
				this.tabPara.qrCodeType = gVal.key
				this.viewInit(this.tabPara)
			},
			async viewInit(valueArray = {}) {
				this.viewModel = await data.search(this.widget.value, valueArray)
			},
			async butSearch() {
				var para = {
					name: this.searchValue
				}
				this.viewInit(para)
			},
			currentChange(val) {
				this.tabPara.pageIndex = val
				this.viewInit(this.tabPara)
			},
			// 表格加载完成事件
			afterTableLoad(dataResult) {
				if (dataResult.singleReport !== null) {
					var value = {
						value: dataResult.singleReport
					}
					this.viewModel = value
				} else {
					this.viewModel = null
				}
				this.$nextTick(() => {
					dataResult.border.type = this.widget.value.themeColor
					var border = this.$ala.getBorder(dataResult.border, this.widgetValue.table.border)
					this.$refs.xBorder.init(border)
				})
			},
			toExcel() {
				this.$refs.xTable.toExcel()
			},
			// 监听 x-widget值得变化,不能直接监听路由，直接监听路由可能会导致数据延迟
			watchWidget(val) {
				this.init()
				if (this.reload === false) {
					this.$nextTick(() => {
						this.$refs.xTable.init(this.table.type, this.table.columns)
					})
				}
				this.reload = false // 解决刷新浏览器，数据加载两次的问题
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	@import "./index.scss";
</style>